<template>
    <div style="width: 100%;height: 100vh;display: flex;">
        <div class="app-container">
            <!-- 左侧菜单 -->
            <div :class="['menu', { 'menu-collapsed': isCollapsed }]">
                <!-- 伸缩按钮 -->
                <div class="collapse-button" @click="toggleMenu">
                    <el-icon v-if="isCollapsed" style="margin-left: 22px;margin-top: 10px;">
                        <Expand />
                    </el-icon>
                    <el-icon v-else style="margin-left: 22px;margin-top: 10px;">
                        <Fold />
                    </el-icon>
                </div>

                <!-- 菜单内容 -->
                <div class="menu-content">
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <Tools /> <!-- 接口工坊使用工具图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipCreate">接口工坊</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <Grid /> <!-- 接口管理使用网格图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipGain">接口管理</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <MagicStick /> <!-- 快速构建器使用魔法棒图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">快速构建器</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <Cpu /> <!-- AI模型使用CPU图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">AI模型</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <OfficeBuilding /> <!-- 工作台使用办公楼图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">工作台</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <Collection /> <!-- 码实验室使用实验图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">码实验室</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <Coin /> <!-- 会员中心使用金币图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">会员中心</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <UserFilled /> <!-- 我的使用用户图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">我的</span>
                    </div>
                    <div class="menu-item" @click="handleMenuItemClick">
                        <el-icon>
                            <DataAnalysis /> <!-- 设置使用数据分析图标 -->
                        </el-icon>
                        <span v-show="!isCollapsed" @click="skipEye">设置</span>
                    </div>
                </div>
            </div>
        </div>

    <div style="width: 95%;height: 100%;">
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
    </div>

</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';

import { ref } from 'vue';
import { Fold, Expand, House, Tools, Grid, Cpu, MagicStick, DataAnalysis, OfficeBuilding, User, Collection, Coin, UserFilled } from '@element-plus/icons-vue';

// 控制菜单是否收起
const isCollapsed = ref(false);

// 切换菜单状态
const toggleMenu = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 菜单项点击处理
const handleMenuItemClick = () => {
  if (!isCollapsed.value) {
    isCollapsed.value = true;
  }
};

let router = useRouter()

let skipCreate = () => {
    router.push('/create')
}
let skipGain = () => {
    router.push('/gain')
}
let skipEye = () => {
    router.push('/eye')
}


</script>
<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}

/* 左侧菜单 - 添加完整过渡效果 */
.menu {
  width: 200px;
  background-color: #304156;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.menu-collapsed {
  width: 64px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

/* 菜单项悬停效果 */
.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px !important;
}

.menu-item .el-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* 调整原有样式 */
.menu-content {
  padding: 8px; /* 减少内边距 */
}

/* 保持其他原有样式不变 */
</style>